﻿/// <reference path="../lib/angular/angular-1.3.0.min.js" />
/// <reference path="../lib/openlayers3/ol.js" />
/// <reference path="../lib/jquery/jquery-2.1.1.min.js" />
var mapControllers = angular.module('mapControllers', []);

mapControllers.controller('MapCtrl', ['$scope', '$rootScope', '$location',
    function ($scope, $rootScope, $location) {
        //init map
        var view = new ol.View({
            center: ol.proj.transform([116.34025, 39.98865], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11
        });
        var map = new ol.Map({
            view: view,
            target: 'map'
        });
        //平移地图后更新地图信息
        map.on('moveend', function (e) {
            $scope.updateInfo();
        });
        $scope.updateInfo = function () {
            $scope.mapInfo();
            $scope.$digest();
        };
        $scope.mapInfo = function () {
            return 'zoom:' + map.getView().getZoom() + ', center:' + map.getView().getCenter().toString();
        };

        $rootScope.view = view;
        $rootScope.map = map;
        $rootScope.initCenter = view.getCenter();
    }
]);

mapControllers.controller('MapActCtrl', ['$scope', '$rootScope',
    function ($scope, $rootScope) {
        //地图操作
        var actions = [{
            name: '定位',
            icon: 'glyphicon glyphicon-screenshot',
            action: function () {
                $rootScope.view.setCenter($rootScope.initCenter);
            }
        }, {
            name: '放大',
            icon: 'glyphicon glyphicon-zoom-in',
            action: function () {
                var map = $rootScope.map;
                map.getView().setZoom(map.getView().getZoom() + 1);
            }
        }, {
            name: '缩小',
            icon: 'glyphicon glyphicon-zoom-out',
            action: function () {
                var map = $rootScope.map;
                map.getView().setZoom(map.getView().getZoom() - 1);
            }
        }, {
            name: '导出',
            icon: 'glyphicon glyphicon-download-alt',
            action: function ($event) {
                var map = $rootScope.map;
                map.once('postcompose', function (event) {
                    var canvas = event.context.canvas;
                    $event.currentTarget.href = canvas.toDataURL('image/png');
                });
                map.renderSync();
            }
        }];

        $scope.actions = actions;

        $scope.toggleLayerList = function () {
            //此次操作了UI
            $('body').toggleClass('hide-list').toggleClass('show-list');
        };
    }
]);

mapControllers.controller('MapListCtrl', ['$scope', '$rootScope', '$http', 'Maps', 'LayerFactory',
    function ($scope, $rootScope, $http, Maps, LayerFactory) {

        $scope.layers = Maps.query(function (maps) {
            for (var i = 0; i < $scope.layers.length; i++) {
                $scope.layers[i].index = i;

                $scope.$watch('layers[' + i + ']', function (layer) {
                    var l = $rootScope.map.getLayers().item(layer.index);
                    l.setVisible(layer.open);
                    l.setOpacity(layer.opacity);
                }, true);

                var l = LayerFactory.createLayer($scope.layers[i]);
                $rootScope.map.addLayer(l);
            }
        });
    }
]);